<template>
	<view class="content">
		<!-- 头部 -->
		<view class="comments-title">
			<view class="d-flex align-items-center">
				<u-icon @click="goback" name="arrow-leftward" size="35"></u-icon>
				<text style="margin-left: 20rpx;">评论({{total}})</text>
			</view>
			<u-icon name="share" size="50"></u-icon>
		</view>
		<!-- 歌手照片 -->
		<view class="comments-img" @click="goback">
			<view>
				<u-image width="200rpx" :fade="true" duration="450" border-radius="10" mode="widthFix"
					:src="commentlist.coverImgUrl">
				</u-image>
				<view class="imgtext">
					<text>{{commentlist.name}}</text>
					<text style="color: #007AFF;font-size: 20rpx;"><span
							style="color:#000000;padding-right: 5px;">by</span> {{commentlist.creator.nickname}}</text>
				</view>
			</view>
			<view>
				<!-- <uni-icons type="arrowright"></uni-icons> -->
			</view>
		</view>
		<!-- 间隔槽 -->
		<u-gap height="15" bg-color="#F7F7F7"></u-gap>
		<!-- 评论区 -->
		<view class="comments-box">
			<text>评论区</text>
			<view>
				<text @click="switchs('0')" :class="current == 0 ? 'active' : ''">推荐</text>
				<text @click="switchs('1')" :class="current == 1 ? 'active' : ''">最热</text>
				<text @click="switchs('2')" :class="current == 2 ? 'active' : ''">最新</text>
			</view>
		</view>
		<!-- 评论信息 -->
		<view class="box">
			<view class="box-item" v-for="(item,index) in comments" :key="index">
				<view class="user-message">
					<view class="user-left">
						<!-- 用户头像 -->
						<u-image width="100rpx" shape="circle" :lazy-load="true" mode="widthFix"
							:src="item.user.avatarUrl">
						</u-image>
						<!-- 用户信息 -->
						<view class="box-user">
							<text>{{item.user.nickname}}</text>
							<text>{{item.time | time}}</text>
						</view>
					</view>

					<view class="user-right">
						<text style="color:#929292;">{{item.likedCount | count}}</text>
						<u-icon name="thumb-up" color="#929292" size="35"></u-icon>
						<!-- <u-icon name="thumb-up-fill"  v-else="show" @click="send" size="35"></u-icon> -->
					</view>
				</view>
				<!-- 评论内容 -->
				<view class="box-content">
					<text>{{item.content}}</text>
				</view>
			</view>
		</view>
		<view class="input">
			<u-input v-model="value" :type="type" placeholder="写评论..." :border="border" />
			<u-button @click="send">发送</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		playcomments
	} from '../../network/recommen.js'
	import moment from 'moment'
	export default {
		computed: {
			...mapState(['songId', 'songs', 'author', 'pic', 'commentlist'])
		},
		data() {
			return {
				total: "", //评论数
				current: 0, //切换项
				hotComments: [], //最热评论
				comments: [], //最新评论
				before: '', //最后一首歌的时间
				isFooter: false, //底线
				offset: 1, // 分页参数
				before: '', // 总的分页数
				show: true,
				value: '', //评论内容
				type: "",
				border: ''
			}
		},
		onLoad() {
			this.getComments();
		},
		methods: {
			getComments() {
				playcomments(this.commentlist.id).then(res => {
					this.total = res.total //获取总数
					this.hotComments = res.hotComments //获取热门评论
					this.comments = res.comments //获取最新评论
					this.before = res.comments[19].time;
					console.log(res);
				})
			},
			//返回上一页
			goback(){
				uni.navigateBack({
					data:1
				})
			}
			// getComments() {
			// 	playcomments(this.commentlist).then() {
			// 		console.log(res);
			// 	}
			// }
		},
		filters: {
			count(v) {
				return v > 100000 ? (v / 10000).toFixed(1) + '万' : v
			},
			time(time) {
				return moment(time).format('YYYY-MM-DD'); // 2021/08/21
			}
		}
	}
</script>

<style scoped lang="scss">
	//头部
	.comments-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		margin-top: 10px;
	}

	.comments-img {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;

		>view {
			display: flex;
			align-items: center;

			.imgtext {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;

				text {
					width: 100%;
					padding: 10rpx 10rpx;
					display: block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-weight: 600;
				}
			}
		}
	}

	// 评论区
	.comments-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		position: sticky;
		top: 0rpx;
		background-color: #fff;
		z-index: 2;

		text {
			font-weight: 600;
		}

		view {
			text {
				margin: 0 10rpx;
				font-weight: 500;
				color: #ACACAC;
				font-size: 20rpx;
			}

			.active {
				color: red !important;
				font-weight: 600;
			}
		}
	}

	// 评论内容
	.box-content {
		font-size: 20rpx;
		margin-left: 110rpx;
		font-family: FangSong_GB2312;
		border-bottom: 1px solid #EFEDEE;
		padding: 10rpx 0;
	}

	// 评论信息
	.box {
		width: 100%;
		padding: 30rpx;

		.box-item {
			display: flex;
			flex-direction: column;
		}
	}

	.user-message {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.user-left {
			display: flex;
			align-items: center;

			.box-user {
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;
			}

			.box-user text:nth-child(1) {
				color: #5B5B5B;
			}

			.box-user text:nth-child(2) {
				font-size: 20rpx;
				color: #CCCCCC;
			}
		}
	}

	// 评论框
	.input {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background-color: #fff;
	}
</style>
